﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="BuildStatus.Web.Default" %>

<!DOCTYPE html>
<html class="smart-style-5" ng-app="buildsApp">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <title>TFSBuildStatus</title>

    <link rel="shortcut icon" href="/wwwroot/Images/favicon.ico" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <script src="/wwwroot/angular/angular.min.js"></script>
    <script src="/wwwroot/angular/angular-resource.js"></script>
    <script src="/wwwroot/Scripts/app.js"></script>
    <script src="/wwwroot/Scripts/Services/buildsServices.js"></script>
    <script src="/wwwroot/Scripts/Controllers/buildsController.js"></script>

    <link href='/wwwroot/Fonts/DroidSans.css' rel='stylesheet' type='text/css'>

    <style>
        *
        {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor: default;
            
            box-sizing: border-box;
        }

        html,
        body
        {
            background-color: #272b30;
            font-family: 'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 16px;
        }

        h1, h2, h3, h4, h5
        {
            margin: 0px;
        }

        body,
        .AngularBuildsController
        {
            display: flex;
            flex-flow: row wrap;
            align-content: stretch;
            width: 100%;
            margin: 0px;
        }

        body
        {
            margin-top: 4px;
        }

        .TeamProject
        {
            min-width: 400px;
            margin: 0px 8px 0px 8px;
            flex: 1;
        }

        .TeamProject .Name
        {
            color: #ffffff;
        }

        .TeamProject .CurrentSprintURL,
        .TeamProject .CurrentSprintURL IMG,
        .TeamProject .BuildsURL,
        .TeamProject .BuildsURL IMG
        {
            cursor: pointer;            
        }

        .TeamProject .CurrentSprintURL,
        .TeamProject .BuildsURL
        {
            visibility: hidden;
        }
        .TeamProject:hover .CurrentSprintURL,
        .TeamProject:hover .BuildsURL
        {
            visibility: visible;
        }

        .BuildDefinition
        {
            display: -webkit-flex;
            display: flex;
            flex-flow: column wrap;
            align-content: flex-start;
            padding: 4px 0px 4px 88px;
            position: relative;
            margin-bottom: 12px;
            border: 1px solid black;
            border-radius: 6px;
        }

        .BuildDefinition::before
        {
            background-position: center right;
            background-repeat: no-repeat;
            width: 80px;
            height: 100%;
            content: "";
            position: absolute;
            left: 0px;
            top: 0px;
        }

        /*
        http://www.colorzilla.com/gradient-editor/
        http://www.cssmatic.com/gradient-generator
        */
        .BuildDefinition.Succeeded
        {
            background: #c9de96; /* Old browsers */
            background: -moz-linear-gradient(-45deg, #c9de96 0%, #8ab66b 44%, #398235 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#c9de96), color-stop(44%,#8ab66b), color-stop(100%,#398235)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(-45deg, #c9de96 0%,#8ab66b 44%,#398235 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(-45deg, #c9de96 0%,#8ab66b 44%,#398235 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(-45deg, #c9de96 0%,#8ab66b 44%,#398235 100%); /* IE10+ */
            background: linear-gradient(135deg, #c9de96 0%,#8ab66b 44%,#398235 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        }

        .BuildDefinition.Succeeded .History
        {
            /* http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28left\%2C\%20rgba\%28170\%2C202\%2C128\%2C1\%29\%200\%25\%2C\%20rgba\%2868\%2C137\%2C60\%2C1\%29\%20100\%25\%29\%3B' */
            background: rgba(170,202,128,1);
            background: -moz-linear-gradient(left, rgba(170,202,128,1) 0%, rgba(68,137,60,1) 100%);
            background: -webkit-gradient(left top, right top, color-stop(0%, rgba(170,202,128,1)), color-stop(100%, rgba(68,137,60,1)));
            background: -webkit-linear-gradient(left, rgba(170,202,128,1) 0%, rgba(68,137,60,1) 100%);
            background: -o-linear-gradient(left, rgba(170,202,128,1) 0%, rgba(68,137,60,1) 100%);
            background: -ms-linear-gradient(left, rgba(170,202,128,1) 0%, rgba(68,137,60,1) 100%);
            background: linear-gradient(to right, rgba(170,202,128,1) 0%, rgba(68,137,60,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaca80', endColorstr='#44893c', GradientType=1 );
        }

        .BuildDefinition.Succeeded::before
        {
            background-image: url('/wwwroot/Images/Succeeded.png');
        }

        .BuildDefinition.PartiallySucceeded,
        .BuildDefinition.PartiallySucceeded .History
        {
            background: rgba(255,175,75,1);
            background: -moz-linear-gradient(-45deg, rgba(255,175,75,1) 0%, rgba(163,91,2,1) 100%);
            background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,175,75,1)), color-stop(100%, rgba(163,91,2,1)));
            background: -webkit-linear-gradient(-45deg, rgba(255,175,75,1) 0%, rgba(163,91,2,1) 100%);
            background: -o-linear-gradient(-45deg, rgba(255,175,75,1) 0%, rgba(163,91,2,1) 100%);
            background: -ms-linear-gradient(-45deg, rgba(255,175,75,1) 0%, rgba(163,91,2,1) 100%);
            background: linear-gradient(135deg, rgba(255,175,75,1) 0%, rgba(163,91,2,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#a35b02', GradientType=1 );
        }

        .BuildDefinition.PartiallySucceeded::before
        {
            background-image: url('/wwwroot/Images/PartiallySucceded.png');
        }

        .BuildDefinition.InProgress
        {
            background: #f1e767; /* Old browsers */
            background: -moz-linear-gradient(-45deg, #f1e767 0%, #feb645 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f1e767), color-stop(100%,#feb645)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(-45deg, #f1e767 0%,#feb645 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(-45deg, #f1e767 0%,#feb645 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(-45deg, #f1e767 0%,#feb645 100%); /* IE10+ */
            background: linear-gradient(135deg, #f1e767 0%,#feb645 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        }

        .BuildDefinition.InProgress .History
        {
            /* http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28left\%2C\%20rgba\%28242\%2C217\%2C93\%2C1\%29\%200\%25\%2C\%20rgba\%28253\%2C187\%2C72\%2C1\%29\%20100\%25\%29\%3B' */
            background: rgba(242,217,93,1);
            background: -moz-linear-gradient(left, rgba(242,217,93,1) 0%, rgba(253,187,72,1) 100%);
            background: -webkit-gradient(left top, right top, color-stop(0%, rgba(242,217,93,1)), color-stop(100%, rgba(253,187,72,1)));
            background: -webkit-linear-gradient(left, rgba(242,217,93,1) 0%, rgba(253,187,72,1) 100%);
            background: -o-linear-gradient(left, rgba(242,217,93,1) 0%, rgba(253,187,72,1) 100%);
            background: -ms-linear-gradient(left, rgba(242,217,93,1) 0%, rgba(253,187,72,1) 100%);
            background: linear-gradient(to right, rgba(242,217,93,1) 0%, rgba(253,187,72,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2d95d', endColorstr='#fdbb48', GradientType=1 );
        }

        .BuildDefinition.Queued
        {
            /* http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28left\%2C\%20rgba\%28203\%2C96\%2C179\%2C1\%29\%200\%25\%2C\%20rgba\%28219\%2C54\%2C164\%2C1\%29\%20100\%25\%29\%3B' */
            background: rgba(183,222,237,1);
            background: -moz-linear-gradient(left, rgba(183,222,237,1) 0%, rgba(32,124,229,1) 100%);
            background: -webkit-gradient(left top, right top, color-stop(0%, rgba(183,222,237,1)), color-stop(100%, rgba(32,124,229,1)));
            background: -webkit-linear-gradient(left, rgba(183,222,237,1) 0%, rgba(32,124,229,1) 100%);
            background: -o-linear-gradient(left, rgba(183,222,237,1) 0%, rgba(32,124,229,1) 100%);
            background: -ms-linear-gradient(left, rgba(183,222,237,1) 0%, rgba(32,124,229,1) 100%);
            background: linear-gradient(to right, rgba(183,222,237,1) 0%, rgba(32,124,229,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#207ce5', GradientType=1 );
        }

        .BuildDefinition.Queued .History
        {
            /* http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28left\%2C\%20rgba\%28203\%2C96\%2C179\%2C1\%29\%200\%25\%2C\%20rgba\%28219\%2C54\%2C164\%2C1\%29\%20100\%25\%29\%3B' */
            background: rgba(183,222,237,1);
            background: -moz-linear-gradient(left, rgba(183,222,237,1) 0%, rgba(32,124,229,1) 100%);
            background: -webkit-gradient(left top, right top, color-stop(0%, rgba(183,222,237,1)), color-stop(100%, rgba(32,124,229,1)));
            background: -webkit-linear-gradient(left, rgba(183,222,237,1) 0%, rgba(32,124,229,1) 100%);
            background: -o-linear-gradient(left, rgba(183,222,237,1) 0%, rgba(32,124,229,1) 100%);
            background: -ms-linear-gradient(left, rgba(183,222,237,1) 0%, rgba(32,124,229,1) 100%);
            background: linear-gradient(to right, rgba(183,222,237,1) 0%, rgba(32,124,229,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#207ce5', GradientType=1 );
        }

        .BuildDefinition.InProgress::before
        {
            background-image: url('/wwwroot/Images/InProgress.png');
        }

        .BuildDefinition.Queued::before
        {
            background-image: url('/wwwroot/Images/Queued.png');
        }

        .BuildDefinition.NotStarted,
        .BuildDefinition.Stopped
        {
            background: #7d7e7d; /* Old browsers */
            background: -moz-linear-gradient(-45deg, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(-45deg, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(-45deg, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(-45deg, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
            background: linear-gradient(135deg, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

            Color: #eeeeee;
        }

        .BuildDefinition.NotStarted .History,
        .BuildDefinition.Stopped .History
        {
            background: rgba(97,97,97,1);
            background: -moz-linear-gradient(left, rgba(97,97,97,1) 0%, rgba(24,24,24,1) 100%);
            background: -webkit-gradient(left top, right top, color-stop(0%, rgba(97,97,97,1)), color-stop(100%, rgba(24,24,24,1)));
            background: -webkit-linear-gradient(left, rgba(97,97,97,1) 0%, rgba(24,24,24,1) 100%);
            background: -o-linear-gradient(left, rgba(97,97,97,1) 0%, rgba(24,24,24,1) 100%);
            background: -ms-linear-gradient(left, rgba(97,97,97,1) 0%, rgba(24,24,24,1) 100%);
            background: linear-gradient(to right, rgba(97,97,97,1) 0%, rgba(24,24,24,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#616161', endColorstr='#181818', GradientType=1 );
        }

        .BuildDefinition.NotStarted::before,
        .BuildDefinition.Stopped::before
        {
            background-image: url('/wwwroot/Images/BuildStopped.png');
        }

        .BuildDefinition.Failed
        {
            /* http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28\-45deg\%2C\%20rgba\%28248\%2C79\%2C50\%2C1\%29\%200\%25\%2C\%20rgba\%2882\%2C11\%2C6\%2C1\%29\%20100\%25\%29\%3B' */
            background: rgba(248,80,50,1);
            background: -moz-linear-gradient(-45deg, rgba(248,80,50,1) 0%, rgba(82,11,6,1) 100%);
            background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(248,80,50,1)), color-stop(100%, rgba(82,11,6,1)));
            background: -webkit-linear-gradient(-45deg, rgba(248,80,50,1) 0%, rgba(82,11,6,1) 100%);
            background: -o-linear-gradient(-45deg, rgba(248,80,50,1) 0%, rgba(82,11,6,1) 100%);
            background: -ms-linear-gradient(-45deg, rgba(248,80,50,1) 0%, rgba(82,11,6,1) 100%);
            background: linear-gradient(135deg, rgba(248,80,50,1) 0%, rgba(82,11,6,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#520b06', GradientType=1 );

            color: #eeeeee;
        }

        .BuildDefinition.Failed .History
        {
            background: rgba(213,66,40,1);
            background: -moz-linear-gradient(left, rgba(213,66,40,1) 0%, rgba(95,17,10,1) 100%);
            background: -webkit-gradient(left top, right top, color-stop(0%, rgba(213,66,40,1)), color-stop(100%, rgba(95,17,10,1)));
            background: -webkit-linear-gradient(left, rgba(213,66,40,1) 0%, rgba(95,17,10,1) 100%);
            background: -o-linear-gradient(left, rgba(213,66,40,1) 0%, rgba(95,17,10,1) 100%);
            background: -ms-linear-gradient(left, rgba(213,66,40,1) 0%, rgba(95,17,10,1) 100%);
            background: linear-gradient(to right, rgba(213,66,40,1) 0%, rgba(95,17,10,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d54228', endColorstr='#5f110a', GradientType=1 );

            color: #eeeeee;
        }

        .BuildDefinition.Failed::before
        {
            background-image: url('/wwwroot/Images/Failed.png');
        }

        .BuildDefinition.Information
        {
            /* http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28\-45deg\%2C\%20rgba\%28248\%2C79\%2C50\%2C1\%29\%200\%25\%2C\%20rgba\%2882\%2C11\%2C6\%2C1\%29\%20100\%25\%29\%3B' */
            background: rgba(147,206,222,1);
            background: -moz-linear-gradient(top, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 41%, rgba(73,165,191,1) 100%);
            background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(147,206,222,1)), color-stop(41%, rgba(117,189,209,1)), color-stop(100%, rgba(73,165,191,1)));
            background: -webkit-linear-gradient(top, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 41%, rgba(73,165,191,1) 100%);
            background: -o-linear-gradient(top, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 41%, rgba(73,165,191,1) 100%);
            background: -ms-linear-gradient(top, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 41%, rgba(73,165,191,1) 100%);
            background: linear-gradient(to bottom, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 41%, rgba(73,165,191,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#49a5bf', GradientType=0 );

            /* color: #eeeeee; */
        }

        .BuildDefinition.Information::before
        {
            background-image: url('/wwwroot/Images/Information.png');
            background-size: contain;
            margin-left: 8px;
            width: 64px;
            height: 100%;
            content: "";
            position: absolute;
            left: 0px;
            top: 0px;

        }


        .HideIcons .BuildDefinition
        {
            padding-left: 12px !important;
        }

        .HideIcons .BuildDefinition::before
        {
            background-image: none;
            width: 0px;
            padding-left: 24px !important;
        }

        .BuildDefinition .Name,
        .BuildDefinition .Status,
        .BuildDefinition .RequestedBy,
        .BuildDefinition .StartTime,
        .BuildDefinition .Duration
        {
            padding-right: 24px;
        }

        .BuildDefinition .Name
        {
            font-weight: bold;
            color: #ffffff;
            text-shadow: 0 0 8px #000000;
        }

        .BuildDefinition .Status
        {
        }

        .BuildDefinition .RequestedBy
        {
        }

        .BuildDefinition .StartTime
        {
        }

        .BuildDefinition .Duration
        {
        }

        .BuildDefinition .BuildProgress
        {
            display: none;
            height: 8px;
            width: 100%;
            padding-right: 16px;
        }
        .BoxedTeamProjects .BuildDefinition .BuildProgress
        {
            padding-right: 40px;
        }
        /*.BuildDefinition.Succeeded .BuildProgress,*/
        .BuildDefinition.InProgress .BuildProgress
        {
            display: block;
        }

        .BuildProgress .BuildProgressBorder
        {
            border: solid 1px black;
            width: 100%;
            height: 100%;
        }

        .BuildProgress .BuildProgressBorder .ProgressBar
        {
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6db3f2+0,54a3ee+50,3690f0+51,1e69de+100;Blue+Gloss+%233 */
            background: #6db3f2; /* Old browsers */
            background: -moz-linear-gradient(top,  #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */

            height: 100%;
        }

        .BuildDefinition .HistoryIcon
        {
            background-image: url('/wwwroot/Images/ArrowDown.png');
            background-position: bottom center;
            background-repeat: no-repeat;
            width: 32px;
            height: 32px;
            position: absolute;
            right: 8px;
            bottom: 4px;
        }

        .BuildDefinition .HistoryIcon:hover
        {
            width: 32px;
            height: 32px;
            right: 8px;
            bottom: 0px;
            background-size: contain;
        }

        .BuildDefinition.PartiallySucceeded .Retry,
        .BuildDefinition.Stopped .Retry,
        .BuildDefinition.Failed .Retry
        {
            background-position: center right;
            background-repeat: no-repeat;
            width: 32px;
            height: 32px;
            position: absolute;
            right: 8px;
            top: 8px;
            background-image: url('/wwwroot/Images/Retry.png');
        }

        .BuildDefinition.PartiallySucceeded .Retry:hover,
        .BuildDefinition.Stopped .Retry:hover,
        .BuildDefinition.Failed .Retry:hover
        {
            background-position: center right;
            background-repeat: no-repeat;
            background-size: contain;
            width: 40px;
            height: 40px;
            content: "";
            position: absolute;
            right: 4px;
            top: 4px;
            background-image: url('/wwwroot/Images/Retry.png');
        }

        .SmallItems .BuildDefinition.PartiallySucceeded .Retry,
        .SmallItems .BuildDefinition.Stopped .Retry,
        .SmallItems .BuildDefinition.Failed .Retry
        {
            background-position: center right;
            background-repeat: no-repeat;
            background-size: contain;
            width: 24px;
            height: 24px;
            position: absolute;
            right: 11px;
            top: 4px;
        }

        .SmallItems .BuildDefinition.PartiallySucceeded .Retry:hover,
        .SmallItems .BuildDefinition.Stopped .Retry:hover,
        .SmallItems .BuildDefinition.Failed .Retry:hover
        {
            background-position: center right;
            background-repeat: no-repeat;
            background-size: contain;
            width: 32px;
            height: 32px;
            content: "";
            position: absolute;
            right: 7px;
            top: 0px;
        }

        .History
        {
            position: absolute;
            left: 16px;
            right: 16px;
            top: 100%;
            height: auto;
            z-index: 100;
            border: 1px solid black;
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
            border-top: none;
            box-shadow: -11px 12px 23px rgba(0,0,0,.2);
            padding: 4px 8px 4px 8px;
            display: none;
        }

        .History .BuildDefinition
        {
            flex: 1 !important;
            display: block !important;
            padding: 4px !important;
            margin: 0px 0px 4px 0px !important;
            border-radius: 5px;
        }

        .History .BuildDefinition::before
        {
            display: none !important;
        }

        .SmallItems .History .BuildDefinition .Status
        {
            display: block !important;
        }

        .SmallItems
        {
            font-size: 12px;
        }

        .SmallItems .BuildDefinition .StartTime,
        .SmallItems .BuildDefinition .Duration
        {
            /* display: none !important; */
        }

        .SmallItems .BuildDefinition .Status
        {
            display: none !important;
        }

        .SmallItems .BuildDefinition
        {
            padding: 4px 0px 4px 64px;
        }

        .SmallItems .BuildDefinition::before
        {
            background-size: contain;
            margin-left: 8px;
            width: 48px;
            height: 100%;
            content: "";
            position: absolute;
            left: 0px;
            top: 0px;
        }

        .BoxedTeamProjects
        {
        }

        .BoxedTeamProjects .TeamProject
        {
            display: block;
        }

        .BoxedTeamProjects .TeamProject
        {
            flex: 1;
        }

        .FlowingTeamProjects
        {
        }

        .FlowingTeamProjects .TeamProject
        {
            display: flex;
            flex-wrap: wrap;
            flex-basis: 100%;
        }

        .FlowingTeamProjects .TeamProject .Name
        {
            flex-basis: 100%;
        }

        .FlowingTeamProjects .BuildDefinition
        {
            display: inline;
            flex: none;
            margin-right: 8px;
        }


        /*
        .FlowingTeamProjects .BuildDefinition.PartiallySucceeded,
        .FlowingTeamProjects .BuildDefinition.Stopped,
        .FlowingTeamProjects .BuildDefinition.Failed
        */
        .FlowingTeamProjects .BuildDefinition
        {
            padding-right: 24px;
        }

        .floatingmenu
        {
            position: fixed;
            z-index: 100;
            top: 8px;
            right: 0px;
            width: 0px;
            padding: 0px;
            box-shadow: -11px 12px 23px rgba(0,0,0,.2);
            color: rgb(51, 51, 51);
            font-size: 13px;
            border-bottom-left-radius: 8px;


            /*background-color: rgb(241, 218, 145);*/
            background: rgba(241,231,103,1);
            background: -moz-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(241,231,103,1)), color-stop(100%, rgba(254,182,69,1)));
            background: -webkit-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: -o-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: -ms-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: linear-gradient(to bottom, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645', GradientType=0 );
        }

        .floatingmenu.expanded
        {
            width: 150px;
            padding: 8px;
        }

        .floatingmenu .settingsbutton
        {
            position: absolute;
            z-index: 100;
            left: -32px;
            top: 0px;
            width: 32px;
            height: 32px;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
            box-shadow: -11px 12px 23px rgba(0,0,0,.2);
            cursor: pointer;

            /*background-color: rgb(241, 218, 145);*/
            background: rgba(241,231,103,1);
            background: -moz-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(241,231,103,1)), color-stop(100%, rgba(254,182,69,1)));
            background: -webkit-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: -o-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: -ms-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: linear-gradient(to bottom, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645', GradientType=0 );
            background-size: 32px 80px;
        }

        .floatingmenu .settingsbutton:after
        {
            background-image: url('/wwwroot/Images/Configuration.png');
            background-repeat: no-repeat;
            background-position: center;

            position: absolute;
            width: 32px;
            height: 32px;
            content: ' ';
        }

        .floatingmenu.expanded .settingsbutton:after
        {
            background-image: url('/wwwroot/Images/close.png');
        }

        .floatingmenu form
        {
            display: flex;
            flex-flow: row wrap;
            align-content: stretch;
        }

        .floatingmenu legend
        {
            font-size: 16px;
            border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
            width: 100%;
            margin-top: -1px;
            margin-bottom: 10px;
            padding-bottom: 6px;
        }

        .floatingmenu label
        {
            flex: 1;
            flex-basis: 100%;
            height: 17px;
            line-height: 17px;
            vertical-align: top;
        }

        .floatingmenu span
        {
            vertical-align: top;
        }

        .floatingmenu input
        {
            margin-top: 2px;
        }

        .floatingmenu .TeamProjects
        {
            margin-top: 4px;
            padding-top: 4px;
            border-top: 1px dashed rgba(0, 0, 0, 0.2);
        }

        #BuildLogDiv
        {
            z-index: 200;
            position: fixed;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;

            background: rgb(64, 64, 64); /* Fallback */
            background: rgba(64, 64, 64, 0.9);

            display: none;
        }

        .BuildLogFrame
        {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
        }

        .BuildLogFrame .iframeoutercontainer
        {
            position: absolute;
            top: 40px;
            left: 8px;
            right: 8px;
            bottom: 8px;
            overflow: hidden;
            border: solid 1px black;
        }

        .BuildLogFrame .iframeinnercontainer
        {
            position: absolute;
            top: -92px;
            left: 0px;
            right: 0px;
            bottom: 0px;
        }

        .BuildLogFrame iframe
        {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            border: none;
        }

        .BuildLog
        {
            position: absolute;
            top: 100px;
            left: 100px;
            right: 100px;
            bottom: 100px;

            border: 2px solid #000;
            border-radius: 5px;

            padding: 8px;

            background: rgba(249,249,249,1);
            background: -moz-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(226,226,226,1) 51%, rgba(226,226,226,1) 100%);
            background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(249,249,249,1)), color-stop(51%, rgba(226,226,226,1)), color-stop(100%, rgba(226,226,226,1)));
            background: -webkit-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(226,226,226,1) 51%, rgba(226,226,226,1) 100%);
            background: -o-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(226,226,226,1) 51%, rgba(226,226,226,1) 100%);
            background: -ms-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(226,226,226,1) 51%, rgba(226,226,226,1) 100%);
            background: linear-gradient(to bottom, rgba(249,249,249,1) 0%, rgba(226,226,226,1) 51%, rgba(226,226,226,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e2e2e2', GradientType=0 );
        }

        .BuildLogLoading
        {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;

            /* http://preloaders.net/en/circular/2 */
            background-image: url('./wwwroot/Images/Loading.gif');
            background-repeat: no-repeat;
            background-position: center;
        }

        .BuildLog .BuildLogHeader
        {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            height: 32px;

            display: -webkit-flex;
            display: flex;

            flex-flow: row nowrap;
            justify-content: flex-start;
            align-content: flex-start;
            align-items: center;

            padding: 4px;
        }
        .BuildLog .BuildLogHeader.Succeeded
        {
            /* http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28left\%2C\%20rgba\%28170\%2C202\%2C128\%2C1\%29\%200\%25\%2C\%20rgba\%2868\%2C137\%2C60\%2C1\%29\%20100\%25\%29\%3B' */
            background: rgba(170,202,128,1);
            background: -moz-linear-gradient(left, rgba(170,202,128,1) 0%, rgba(68,137,60,1) 100%);
            background: -webkit-gradient(left top, right top, color-stop(0%, rgba(170,202,128,1)), color-stop(100%, rgba(68,137,60,1)));
            background: -webkit-linear-gradient(left, rgba(170,202,128,1) 0%, rgba(68,137,60,1) 100%);
            background: -o-linear-gradient(left, rgba(170,202,128,1) 0%, rgba(68,137,60,1) 100%);
            background: -ms-linear-gradient(left, rgba(170,202,128,1) 0%, rgba(68,137,60,1) 100%);
            background: linear-gradient(to right, rgba(170,202,128,1) 0%, rgba(68,137,60,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaca80', endColorstr='#44893c', GradientType=1 );
        }
        .BuildLog .BuildLogHeader.PartiallySucceeded
        {
            background: rgba(255,175,75,1);
            background: -moz-linear-gradient(-45deg, rgba(255,175,75,1) 0%, rgba(163,91,2,1) 100%);
            background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,175,75,1)), color-stop(100%, rgba(163,91,2,1)));
            background: -webkit-linear-gradient(-45deg, rgba(255,175,75,1) 0%, rgba(163,91,2,1) 100%);
            background: -o-linear-gradient(-45deg, rgba(255,175,75,1) 0%, rgba(163,91,2,1) 100%);
            background: -ms-linear-gradient(-45deg, rgba(255,175,75,1) 0%, rgba(163,91,2,1) 100%);
            background: linear-gradient(135deg, rgba(255,175,75,1) 0%, rgba(163,91,2,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#a35b02', GradientType=1 );
        }
        .BuildLog .BuildLogHeader.InProgress
        {
            background: #f1e767; /* Old browsers */
            background: -moz-linear-gradient(-45deg, #f1e767 0%, #feb645 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f1e767), color-stop(100%,#feb645)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(-45deg, #f1e767 0%,#feb645 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(-45deg, #f1e767 0%,#feb645 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(-45deg, #f1e767 0%,#feb645 100%); /* IE10+ */
            background: linear-gradient(135deg, #f1e767 0%,#feb645 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        }
        .BuildLog .BuildLogHeader.NotStarted,
        .BuildLog .BuildLogHeader.Stopped
        {
            background: #7d7e7d; /* Old browsers */
            background: -moz-linear-gradient(-45deg, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(-45deg, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(-45deg, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(-45deg, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
            background: linear-gradient(135deg, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        }
        .BuildLog .BuildLogHeader.Failed
        {
            /* http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28\-45deg\%2C\%20rgba\%28248\%2C79\%2C50\%2C1\%29\%200\%25\%2C\%20rgba\%2882\%2C11\%2C6\%2C1\%29\%20100\%25\%29\%3B' */
            background: rgba(248,80,50,1);
            background: -moz-linear-gradient(-45deg, rgba(248,80,50,1) 0%, rgba(82,11,6,1) 100%);
            background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(248,80,50,1)), color-stop(100%, rgba(82,11,6,1)));
            background: -webkit-linear-gradient(-45deg, rgba(248,80,50,1) 0%, rgba(82,11,6,1) 100%);
            background: -o-linear-gradient(-45deg, rgba(248,80,50,1) 0%, rgba(82,11,6,1) 100%);
            background: -ms-linear-gradient(-45deg, rgba(248,80,50,1) 0%, rgba(82,11,6,1) 100%);
            background: linear-gradient(135deg, rgba(248,80,50,1) 0%, rgba(82,11,6,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#520b06', GradientType=1 );
        }

        .BuildLog .BuildLogHeader .CollapseAll
        {
            padding: 0px 8px 0px 8px;
            line-height: 24px;
            border: 1px solid transparent;
        }
        .BuildLog .BuildLogHeader .CollapseAll:hover
        {
            background: rgba(241,231,103,1);
            background: -moz-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(241,231,103,1)), color-stop(100%, rgba(254,182,69,1)));
            background: -webkit-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: -o-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: -ms-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: linear-gradient(to bottom, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645', GradientType=0 );
            border: 1px solid #e07110;
        }

        .BuildLog .BuildLogHeader .ExpandAll
        {
            /*
            position: relative;
            left: 0px;
            top: 0px;
            bottom: 0px;
            padding: 0px 8px 0px 8px;
            */
            padding: 0px 8px 0px 8px;
            line-height: 24px;
            border: 1px solid transparent;
        }
        .BuildLog .BuildLogHeader .ExpandAll:hover
        {
            background: rgba(241,231,103,1);
            background: -moz-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(241,231,103,1)), color-stop(100%, rgba(254,182,69,1)));
            background: -webkit-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: -o-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: -ms-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: linear-gradient(to bottom, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645', GradientType=0 );
            border: 1px solid #e07110;
        }

        .BuildLog .BuildLogHeader .BuildLogFullScreen
        {
            position: absolute;
            top: 4px;
            bottom: 4px;
            width: 24px;
            right: 28px;

            border: 1px solid transparent;
        }
        .BuildLog .BuildLogHeader .BuildLogFullScreen:hover
        {
            background: rgba(241,231,103,1);
            background: -moz-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(241,231,103,1)), color-stop(100%, rgba(254,182,69,1)));
            background: -webkit-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: -o-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: -ms-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: linear-gradient(to bottom, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645', GradientType=0 );
            border: 1px solid #e07110;
        }
        .BuildLog .BuildLogHeader .BuildLogFullScreen:after
        {
            position: absolute;
            width: 22px;
            height: 22px;

            background-image: url('./wwwroot/Images/fullscreen.png');
            background-repeat: no-repeat;
            background-size: 16px 16px;
            background-position: center;

            content: ' ';
        }

        .BuildLog .BuildLogHeader .BuildLogRestoreScreen
        {
            position: absolute;
            top: 4px;
            bottom: 4px;
            width: 24px;
            right: 28px;

            border: 1px solid transparent;
        }
        .BuildLog .BuildLogHeader .BuildLogRestoreScreen:hover
        {
            background: rgba(241,231,103,1);
            background: -moz-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(241,231,103,1)), color-stop(100%, rgba(254,182,69,1)));
            background: -webkit-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: -o-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: -ms-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: linear-gradient(to bottom, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645', GradientType=0 );
            border: 1px solid #e07110;
        }
        .BuildLog .BuildLogHeader .BuildLogRestoreScreen:after
        {
            position: absolute;
            width: 22px;
            height: 22px;

            background-image: url('./wwwroot/Images/restore.png');
            background-repeat: no-repeat;
            background-size: 16px 16px;
            background-position: center;

            content: ' ';
        }


        .BuildLog .BuildLogHeader .CloseButton
        {
            position: absolute;
            top: 4px;
            bottom: 4px;
            width: 24px;
            right: 4px;

            border: 1px solid transparent;
        }

        .BuildLog .BuildLogHeader .CloseButton:hover
        {
            background: rgba(241,231,103,1);
            background: -moz-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(241,231,103,1)), color-stop(100%, rgba(254,182,69,1)));
            background: -webkit-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: -o-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: -ms-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            background: linear-gradient(to bottom, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645', GradientType=0 );
            border: 1px solid #e07110;
        }

        .BuildLog .BuildLogHeader .CloseButton:after
        {
            position: absolute;
            width: 22px;
            height: 22px;

            background-image: url('./wwwroot/Images/close.png');
            background-repeat: no-repeat;
            background-size: 16px 16px;
            background-position: center;

            content: ' ';
        }

        .BuildLog .BuildLogContainer
        {
            position: absolute;
            top: 32px;
            left: 2px;
            right: 0px;
            bottom: 0px;
            
            overflow: auto;
        }

        .BuildLog .BuildLogEntry
        {

        }

        .BuildLog .BuildLogEntry .Row
        {
            display: -webkit-flex;
            display: flex;
            flex-flow: row nowrap;
        }
        
        .BuildLog .BuildLogEntry .Children
        {
            padding-left: 32px;
        }

        .BuildLog .BuildLogEntry .Row .Collapse
        {
            width: 16px;
            height: 16px;
            border: 1px solid transparent;

            background-image: url('./wwwroot/Images/Collapse.png');
        }

        .BuildLog .BuildLogEntry .Row .Expand
        {
            width: 16px;
            height: 16px;
            border: 1px solid transparent;

            background-image: url('./wwwroot/Images/Expand.png');
        }

        .BuildLog .BuildLogEntry .Row .Collapse:hover,
        .BuildLog .BuildLogEntry .Row .Expand:hover
        {
            border: 1px solid #ecc757;
            border-radius: 3px;

            background: #f8ebb2; /* Old browsers */
            background: -moz-linear-gradient(top,  #f8ebb2 0%, #fcf8e7 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ebb2), color-stop(100%,#fcf8e7)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  #f8ebb2 0%,#fcf8e7 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  #f8ebb2 0%,#fcf8e7 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  #f8ebb2 0%,#fcf8e7 100%); /* IE10+ */
            background: linear-gradient(to bottom,  #f8ebb2 0%,#fcf8e7 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ebb2', endColorstr='#fcf8e7',GradientType=0 ); /* IE6-9 */
        }

        .BuildLog .BuildLogEntry .Row .Collapse:after
        {
            width: 16px;
            height: 16px;
            position: absolute;
            content: ' ';

            background-image: url('./wwwroot/Images/Collapse.png');
        }
        
        .BuildLog .BuildLogEntry .Row .Expand:after
        {
            width: 16px;
            height: 16px;
            position: absolute;
            content: ' ';

            background-image: url('./wwwroot/Images/Expand.png');
        }
        
        .BuildLog .BuildLogEntry .Row .Bullet
        {
            width: 16px;
            height: 16px;
            border: 1px solid transparent;

            background-image: url('./wwwroot/Images/Bullet.png');
        }

        .BuildLog .BuildLogEntry .Row .BuildError
        {
            min-width: 16px;
            min-height: 16px;
            margin-right: 4px;
            border: 1px solid transparent;
            
            background-image: url('./wwwroot/Images/Error.png');
            background-position: center top;
            background-repeat: no-repeat;
        }

        .BuildLog .BuildLogEntry .Row .BuildErrorText
        {
            font-weight: bold;
        }
        
        .BuildLog .BuildLogEntry .Row .BuildWarning
        {
            min-width: 16px;
            min-height: 16px;
            margin-right: 4px;
            border: 1px solid transparent;
            
            background-image: url('./wwwroot/Images/Alert.png');
            background-position: center top;
            background-repeat: no-repeat;
        }

        .BuildLog .BuildLogEntry .Row .Text
        {
            padding: 0px 8px 0px 0px;
            white-space:pre-wrap;
            
            line-height: 18px;
            vertical-align: center;

            -webkit-touch-callout: initial;
            -webkit-user-select: initial;
            -khtml-user-select: initial;
            -moz-user-select: initial;
            -ms-user-select: initial;
            user-select: initial;
            cursor: initial;
        }
        
        .BuildLog .BuildLogEntry .Row .Duration
        {
            -webkit-touch-callout: initial;
            -webkit-user-select: initial;
            -khtml-user-select: initial;
            -moz-user-select: initial;
            -ms-user-select: initial;
            user-select: initial;
            cursor: initial;

            line-height: 18px;
            vertical-align: center;
        }

        .ConfigurationRequired
        {
            position: fixed;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
        }

        .ConfigurationRequired TABLE
        {
            position: absolute;
            border: 1px solid #cc000a;
            color: #ffffff;
            background-color: #c26565;
            width: 600px;
            top: 50%;
            left: 50%;
            border-radius: 8px;

            transform: translate(-50%, -50%);
        }

        .ConfigurationRequired TD
        {
            padding-left: 8px;
            padding-right: 8px;

            -webkit-touch-callout: initial;
            -webkit-user-select: initial;
            -khtml-user-select: initial;
            -moz-user-select: initial;
            -ms-user-select: initial;
            user-select: initial;
            cursor: initial;
        }

        .ConfigurationRequired TR:first-child TD
        {
            text-align: center;
            padding-bottom: 16px;
            font-size: x-large;
        }
    </style>

    <script>
        function ToggleSettingsMenu()
        {
            var floatingMenu = document.getElementsByClassName('floatingmenu')[0];

            ToggleClassName(floatingMenu, 'expanded');
        }

        function SetLayout()
        {
            var value = document.querySelector('input[name="Layout"]:checked').value;

            SetClassName(document.body, 'BoxedTeamProjects', false);
            SetClassName(document.body, 'FlowingTeamProjects', false);
            SetClassName(document.body, value, true);

            setCookie('Layout', value, 30);
        }

        function SmallItemsChanged()
        {
            var floatingMenu = document.getElementsByClassName('floatingmenu')[0];

            var value = document.querySelector('input[name="SmallItems"]').checked;
            if (value)
            {
                SetClassName(document.body, 'SmallItems', true);
            }
            else
            {
                SetClassName(document.body, 'SmallItems', false);
            }

            setCookie('SmallItems', value, 30);
        }

        function HideIconsChanged()
        {
            var floatingMenu = document.getElementsByClassName('floatingmenu')[0];

            var value = document.querySelector('input[name="HideIcons"]').checked;
            if (value)
            {
                SetClassName(document.body, 'HideIcons', true);
            }
            else
            {
                SetClassName(document.body, 'HideIcons', false);
            }

            setCookie('HideIcons', value, 30);
        }

        function ToggleTeamProject(dontUpdateCookie)
        {
            var floatingMenu = document.getElementsByClassName('floatingmenu')[0];
            var teamProjects = floatingMenu.getElementsByClassName('TeamProjects')[0];

            var selectedTeamProjects = ',';
            var checkboxes = teamProjects.getElementsByTagName("input");
            for (var idx = 0; idx < checkboxes.length; idx++)
            {
                var name = checkboxes[idx].name.substring(6); // Skip TPLBL_

                var teamProject = document.getElementsByClassName(name)[0];
                if (checkboxes[idx].checked)
                {
                    teamProject.style.display = '';

                    selectedTeamProjects += name + ',';
                }
                else
                {
                    teamProject.style.display = 'none';
                }
            }
            selectedTeamProjects += ',';

            if (!dontUpdateCookie)
                setCookie('TeamProjects', selectedTeamProjects);
        }

        function UpdateSelectedTeamProjects(counter)
        {
            var selectedTeamProjects = getCookie('TeamProjects');

            var floatingMenu = document.getElementsByClassName('floatingmenu')[0];
            var teamProjects = floatingMenu.getElementsByClassName('TeamProjects')[0];

            if (!counter)
                counter = 0;

            if (counter == 0 || (teamProjects.length == 0 && counter < 20))
            {
                window.setTimeout(function () { UpdateSelectedTeamProjects(counter + 1); });
                return;
            }

            if (selectedTeamProjects != null)
                selectedTeamProjects = selectedTeamProjects.toLowerCase();

            var checkboxes = teamProjects.getElementsByTagName("input");
            for (var idx = 0; idx < checkboxes.length; idx++)
            {
                var name = checkboxes[idx].name.substring(6); // Skip TPLBL_

                checkboxes[idx].checked = (selectedTeamProjects == null || selectedTeamProjects.indexOf(',' + name.toLowerCase() + ',') >= 0);
            }

            ToggleTeamProject(true);
        }

        function ReloadSettings()
        {
            var layout = getCookie('Layout') || '';
            var radioButton = document.querySelector('input[value="' + layout + '"]');
            if (radioButton)
            {
                radioButton.checked = true;
                SetLayout();
            }

            document.querySelector('input[name="SmallItems"]').checked = (getCookie('SmallItems') == 'true');
            document.querySelector('input[name="HideIcons"]').checked = (getCookie('HideIcons') == 'true');
            SmallItemsChanged();
            HideIconsChanged();

            refreshBuilds();

            window.setTimeout(function () { location.reload(true); }, 60*60*1000);
            window.setInterval(function () { refreshBuilds(); }, 10000);
        }

        function refreshBuilds()
        {
            var buildsController = angular.element(document.getElementById('buildsControllerDiv')).scope();
            buildsController.Refresh(function () { UpdateSelectedTeamProjects(); });
        }

        function setCookie(cname, cvalue, exdays)
        {
            var d = new Date();
            d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
            var expires = "expires=" + d.toUTCString();
            document.cookie = cname + "=" + cvalue + "; " + expires;
        }

        function getCookie(cname)
        {
            // http://www.w3schools.com/js/js_cookies.asp
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++)
            {
                var c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1);
                if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
            }

            return null;
        }

        function ToggleClassName(element, className)
        {
            if (element.className.indexOf(className) >= 0)
            {
                element.className = element.className.replace(className, '').trim();
            }
            else
            {
                element.className += ' ' + className;
            }
        }

        function SetClassName(element, className, setOn)
        {
            // Always remove the className first.
            element.className = element.className.replace(className, '').trim();
            element.className = element.className.replace('  ', ' ');

            if (setOn)
            {
                element.className += ' ' + className;
            }
        }

        function RetryBuild(e)
        {
            if (!e)
                e = window.event;

            var buildNumberDiv = e.currentTarget.parentNode.getElementsByClassName('BuildNumber')[0];
            var buildNumber = buildNumberDiv.innerText || buildNumberDiv.textContent;
            if (!buildNumber)
                return;

            if (!confirm('Are you sure you want to retry this build?'))
                return;

            var buildsController = angular.element(document.getElementById('buildsControllerDiv')).scope();
            buildsController.retry(buildNumber);
        }

        function ToggleHistory(e)
        {
            if (!e)
                e = window.event || event;

            var callingHistoryDiv = e.currentTarget.parentNode.getElementsByClassName('History')[0];

            var foundHistoryDiv = null;
            var historyDivs = document.getElementsByClassName('History');
            for (var curDivIdx = 0; curDivIdx < historyDivs.length; curDivIdx++)
            {
                if (historyDivs[curDivIdx].style.display && historyDivs[curDivIdx].style.display != '')
                {
                    foundHistoryDiv = historyDivs[curDivIdx];
                    break;
                }
            }

            if (foundHistoryDiv)
                foundHistoryDiv.style.display = '';

            if (foundHistoryDiv != callingHistoryDiv)
            {
                callingHistoryDiv.style.display = 'block';
            }

            if (e.stopPropagation) e.stopPropagation();
            else e.cancelBubble = true;
        }

        function HideHistory()
        {
            var historyDivs = document.getElementsByClassName('History');
            for (var curDivIdx = 0; curDivIdx < historyDivs.length; curDivIdx++)
            {
                if (historyDivs[curDivIdx].style.display && historyDivs[curDivIdx].style.display != '')
                {
                    historyDivs[curDivIdx].style.display = '';
                }
            }
        }

        function ShowBuildLog(e)
        {
            if (!e)
                e = window.event || event;

            var buildNumber = e.currentTarget.getAttribute('BuildNumber');
            if (!buildNumber)
                return;

            var buildsController = angular.element(document.getElementById('BuildLogControllerDiv')).scope();
            buildsController.getbuildlog(buildNumber);


            document.getElementById('BuildLogDiv').style.display = 'block';
        }

        function HideBuildLog()
        {
            BuildLogDiv.style.display = '';

            var buildsController = angular.element(document.getElementById('BuildLogControllerDiv')).scope();
            buildsController.getbuildlog();
            // document.getElementById('tfsframe').src = 'about:blank';
            // document.getElementById('tfsframe').setAttribute('ng-src', '{{trustSrc(buildLog.URL)}}');
        }

        function ToggleLogCollapse(e)
        {
            if (!e)
                e = window.event || event;

            var wasExpanded = (e.currentTarget.className.indexOf('Collapse') >= 0);
            var childrenDiv = e.currentTarget.parentNode.parentNode.getElementsByClassName('Children')[0];

            if (wasExpanded)
            {
                e.currentTarget.className = 'Expand';
                childrenDiv.style.display = 'none';
            }
            else
            {
                e.currentTarget.className = 'Collapse';
                childrenDiv.style.display = '';
            }
        }

        function CollapseAll()
        {
            var buildLogEntries = document.getElementsByClassName('BuildLogEntry');
            
            for (var idx = 0; idx < buildLogEntries.length; idx++)
            {
                var row = buildLogEntries[idx].getElementsByClassName('Row')[0];
                var childrenDiv = buildLogEntries[idx].getElementsByClassName('Children')[0];

                var expandButton = row.getElementsByClassName('Collapse')[0];
                if (!expandButton)
                    continue;

                expandButton.className = 'Expand';
                childrenDiv.style.display = 'none';
            }
        }

        function ExpandAll()
        {
            var buildLogEntries = document.getElementsByClassName('BuildLogEntry');

            for (var idx = 0; idx < buildLogEntries.length; idx++)
            {
                var row = buildLogEntries[idx].getElementsByClassName('Row')[0];
                var childrenDiv = buildLogEntries[idx].getElementsByClassName('Children')[0];

                var collapseButton = row.getElementsByClassName('Expand')[0];
                if (!collapseButton)
                    continue;

                collapseButton.className = 'Collapse';
                childrenDiv.style.display = '';
            }
        }

        function ToggleBuildLogFullScreen()
        {
            var BuildLogFullScreenButtonDiv = document.getElementById('BuildLogFullScreenButton');

            if (BuildLogFullScreenButtonDiv.className.indexOf('BuildLogFullScreen') >= 0)
            {
                BuildLogFullScreenButtonDiv.className = 'BuildLogRestoreScreen';
                BuildLogControllerDiv.style.cssText = 'top: 0px; left: 0px; right: 0px; bottom: 0px; border: none; border-radius: 0px;';
            }
            else
            {
                BuildLogFullScreenButtonDiv.className = 'BuildLogFullScreen';
                BuildLogControllerDiv.style.cssText = '';
            }
        }

        function tfsframeloaded()
        {
            /*
            // tfsframe.contentDocument.getElementsByClassName('header-section header-post11');
            var header = tfsframe.contentDocument.getElementsByClassName('header-section');
            header[0].style.display = 'none';
            */
        }
        
        function openInNewTab(filename)
        {
            var url = 'api/embedded/' + filename + '/GetFile';
            var win = window.open(url, '_blank');
            win.focus();
        }
    </script>
</head>

<body ng-cloak class="" onload="ReloadSettings();" onclick="HideHistory();">
    <%
        if (!VerifyConfiguration())
        {
    %>
    <div class="ConfigurationRequired">
        <table>
            <tr>
                <td colspan="2">
                    <h3>Please configure the web.config file.</h3>
                </td>
            </tr>
            <tr>
                <td>TFSUri</td>
                <td>The uri to the tfs collection. E.g. https://xyz.visualstudio.com/DefaultCollection</td>
            </tr>
            <tr>
                <td>TFSUsername<br />
                    TFSPassword</td>
                <td>The username & password used to access the TFS server. For local hosted servers this can be ignored by instead configuring the identity used for the application pool in IIS.</td>
            </tr>
            <tr>
                <td>UseRestAPI</td>
                <td>Set to true (Registry, dword = 1) to use the new rest api.</td>
            </tr>
        </table>
    </div>
    <%
            Response.End();
        }
    %>

    <div id="buildsControllerDiv" ng-controller="buildsController" class="AngularBuildsController">
        <div class="floatingmenu">
            <div class="settingsbutton" onclick="ToggleSettingsMenu();"></div>
            <form action="">
                <legend>Layout Options</legend>
                <label>
                    <input type="radio" name="Layout" value="BoxedTeamProjects" onchange="SetLayout();" checked /><span>Boxed</span>
                </label>
                <label>
                    <input type="radio" name="Layout" value="FlowingTeamProjects" onchange="SetLayout();" /><span>Flowing</span>
                </label>
                <label>
                    <input type="checkbox" name="SmallItems" onchange="SmallItemsChanged();" /><span>Small Items</span>
                </label>
                <label>
                    <input type="checkbox" name="HideIcons" onchange="HideIconsChanged();" /><span>Hide icon</span>
                </label>


                <div class="TeamProjects">
                    <div ng-repeat="buildProject in builds track by buildProject.Name">
                        <!-- Team Project -->
                        <label>
                            <input type="checkbox" onchange="ToggleTeamProject();" name="TPLBL_{{buildProject.CssName}}" /><span>{{buildProject.Name}}</span>
                        </label>
                    </div>
                </div>
            </form>
        </div>

        <div ng-repeat="buildProject in builds track by buildProject.Name" class="TeamProject {{buildProject.CssName}}" style="display: none;">
            <!-- Team Project -->
            <h2 class="Name">{{buildProject.Name}}
                <a class="CurrentSprintURL" href="{{buildProject.TaskboardURL}}" target="_blank">
                    <img src="/wwwroot/Images/CurrentSprint.png" style="vertical-align: bottom; padding-bottom: 4px;" width="26" height="26" />
                </a>
                <a class="BuildsURL" href="{{buildProject.BuildsURL}}" target="_blank">
                    <img src="/wwwroot/Images/BuildServer.png" style="vertical-align: bottom;" width="32" height="32" />
                </a>
            </h2>

            <div ng-repeat="build in buildProject.Builds track by build.BuildNumber" class="BuildDefinition {{build.DisplayClass}}" buildnumber="{{build.BuildNumber}}" ondblclick="ShowBuildLog(event);">
                <h3 class="Name">{{build.Name}}</h3>
                <div class="Status">{{build.Status}}</div>
                <div class="RequestedBy">{{build.RequestedBy}}</div>
                <div class="StartTime">{{build.StartTime}}&nbsp;&nbsp;({{build.Duration}})</div>
                <!--
                <div class="Duration">{{build.Duration}}</div>
                -->

                <div class="BuildNumber" style="display: none;">{{build.BuildNumber}}</div>
                <div class="Retry" onclick="RetryBuild(event);"></div>
                <div class="HistoryIcon" onclick="ToggleHistory(event);" ng-show="build.History.length"></div>

                <div class="BuildProgress">
                    <div class="BuildProgressBorder">
                        <div class="ProgressBar" style="width: {{build.Progress}}%;"></div>
                    </div>
                </div>

                <div class="History">
                    <div ng-repeat="history in build.History track by history.BuildNumber" class="BuildDefinition {{history.DisplayClass}}" buildnumber="{{history.BuildNumber}}" ondblclick="ShowBuildLog(event); (window.event || event).cancelBubble = true;" onclick="(window.event || event).cancelBubble = true;">
                        <div class="Status">Status: {{history.Status}}<div ng-if="history.IsWaiting">(Waiting)</div>
                        </div>
                        <div class="RequestedBy">By: {{history.RequestedBy}}</div>
                        <div class="StartTime">{{history.StartTime}}<div ng-show="history.Duration != ''" style="display: inline-block;">&nbsp;&nbsp;({{history.Duration}})</div>
                        </div>
                        <!--
                            <div class="StartTime">{{history.StartTime}}&nbsp;&nbsp;({{history.BuildNumber}})</div>
                            <div class="StartTime">StartTime: {{history.StartTime}}&nbsp;&nbsp;({{history.Duration}})</div>
                        -->
                    </div>
                </div>
            </div>
        </div>

        <%= GetEmbeddedHtml() %>
    </div>


    <script type="text/ng-template" id="BuildLogEntryTemplate.html">
        <div class="Row">
            <div ng-if="buildLogEntry.Type == 'ActivityTracking' && buildLogEntry.Children.length > 0" class="Collapse" onclick="ToggleLogCollapse(event);"></div>
            <div ng-if="buildLogEntry.Type == 'ActivityTracking' && buildLogEntry.Children.length == 0" class="Bullet"></div>
            <div ng-if="buildLogEntry.Type != 'ActivityTracking'" class="{{buildLogEntry.Type}}"></div>

            <div class="Text {{buildLogEntry.Type}}Text">{{buildLogEntry.DisplayText}}</div>
            <div class="Duration">{{buildLogEntry.Duration}}</div>
        </div>

        <div class="Children">
            <div ng-repeat="buildLogEntry in buildLogEntry.Children" class="BuildLogEntry">
                <div ng-include="'BuildLogEntryTemplate.html'"></div>
            </div>
        </div>
    </script>

    <div id="BuildLogDiv" onclick="HideBuildLog();">
        <div id="BuildLogControllerDiv" ng-controller="buildsController" class="BuildLog" onclick="(window.event || event).cancelBubble = true;">
            <div ng-if="buildLog.dataLoading" class="BuildLogLoading"></div>

            <div ng-if="!buildLog.URL">
                <div ng-if="!buildLog.dataLoading" class="BuildLogHeader {{buildLog.Status}}" ondblclick="ToggleBuildLogFullScreen();">
                    <div id="CollapseAllButton" class="CollapseAll" onclick="CollapseAll();">Collapse</div>
                    <div id="ExpandAllButton" class="ExpandAll" onclick="ExpandAll();">Expand</div>
                    <div id="BuildLogFullScreenButton" class="BuildLogFullScreen" onclick="ToggleBuildLogFullScreen();"></div>
                    <div class="CloseButton" onclick="HideBuildLog();"></div>
                </div>
                <div class="BuildLogContainer">
                    <div ng-if="!buildLog.dataLoading" ng-repeat="buildLogEntry in buildLog.LogEntries" class="BuildLogEntry">
                        <div ng-include="'BuildLogEntryTemplate.html'"></div>
                    </div>
                </div>
            </div>
            <div ng-if="buildLog.URL.indexOf('http') >= 0" class="BuildLogFrame">
                <div ng-if="!buildLog.dataLoading" class="BuildLogHeader {{buildLog.Status}}" ondblclick="ToggleBuildLogFullScreen();">
                    <div id="BuildLogFullScreenButton" class="BuildLogFullScreen" onclick="ToggleBuildLogFullScreen();"></div>
                    <div class="CloseButton" onclick="BuildLogDiv.style.display = '';"></div>
                </div>

                <div class="iframeoutercontainer">
                    <div class="iframeinnercontainer">
                        <iframe id="tfsframe" ng-src="{{trustSrc(buildLog.URL)}}" onload="tfsframeloaded();" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
